import 'dart:math';

import 'package:flutter/material.dart';
import 'package:im/constants.dart' show AppColors, AppStyles;

///聊天框（头像+聊天框+三角形）
class ChatRow extends StatelessWidget {
  const ChatRow(
      {Key key,
      @required this.sender,
      @required this.content,
      @required this.avatarUrl,
      @required this.chatType,
      this.voiceDuration})
      : super(key: key);

  final int sender; // 发送者： 0 self(自己) 1 other(其他发送者)
  final Widget content; //发送内容
  final String avatarUrl; //用户头像url
  final int chatType; //聊天类型(消息类型)
  final int voiceDuration; //语音持续时间

  @override
  Widget build(BuildContext context) {
    double rpx = MediaQuery.of(context).size.width / 750;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10 * rpx, horizontal: 20 * rpx),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment:
            sender == 1 ? MainAxisAlignment.start : MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          sender == 1
              // 左侧（other）发送者头像
              ? Center(
                  child: Container(
                    // 头像框大小
                    width: 80 * rpx,
                    height: 80 * rpx,
                    child: ClipRRect(
                        // 头像框圆角
                        borderRadius: BorderRadius.circular(6 * rpx),
                        // 头像url
                        child: avatarUrl.indexOf('http') == 0 ||
                                avatarUrl.indexOf('https') == 0
                            ? Image.network(
                                avatarUrl,
                                fit: BoxFit.cover,
                              )
                            : Image.asset(
                                avatarUrl,
                                fit: BoxFit.cover,
                              )),
                  ),
                )
              : Container(),
          sender == 1
              ? Container(
                  width: 10 * rpx,
                )
              : Container(),
          // CustomPaint绘制一个聊天框
          sender == 1
              ? Container(
                  padding: EdgeInsets.only(bottom: 35 * rpx),
                  child: CustomPaint(
                    painter: ChatBoxPainter(
                      color: Colors.white,
                      width: 10 * rpx,
                      height: 15 * rpx,
                    ),
                  ),
                )
              : Container(),
          Container(
            padding: EdgeInsets.all(20 * rpx),
            margin: sender == 1
                ? EdgeInsets.only(left: 10 * rpx)
                : EdgeInsets.only(right: 10 * rpx),
            height: 80 * rpx,
            alignment: Alignment.center,
            child: content,
            decoration: BoxDecoration(
              color: sender == 1
                  ? Colors.white
                  : Color(AppColors.ConversationDetailBgColor),
              borderRadius: BorderRadius.circular(10 * rpx),
            ),
          ),
          // 向右的箭头 初始组件是左箭头，所以需要旋转180度
          sender == 0
              ? Transform.rotate(
                  angle: pi,
                  child: Container(
                    padding: EdgeInsets.only(top: 10 * rpx),
                    child: CustomPaint(
                      painter: ChatBoxPainter(
                        color: Color(AppColors.ConversationDetailBgColor),
                        width: 10 * rpx,
                        height: 15 * rpx,
                      ),
                    ),
                  ),
                )
              : Container(),
          sender == 0
              ? Container(
                  width: 10 * rpx,
                )
              : Container(),
          sender == 0
              // 右侧（self）发送者头像
              ? Center(
                  child: Container(
                    // 头像框大小
                    width: 80 * rpx,
                    height: 80 * rpx,
                    child: ClipRRect(
                        // 头像框圆角
                        borderRadius: BorderRadius.circular(6),
                        // 头像url
                        child: avatarUrl.indexOf('http') == 0 ||
                                avatarUrl.indexOf('https') == 0
                            ? Image.network(
                                avatarUrl,
                                fit: BoxFit.cover,
                              )
                            : Image.asset(
                                avatarUrl,
                                fit: BoxFit.cover,
                              )),
                  ),
                )
              : Container(),
        ],
      ),
    );
  }
}

/// 聊天框三角形
class ChatBoxPainter extends CustomPainter {
  // 构造函数
  ChatBoxPainter(
      {@required this.width, @required this.height, @required this.color});
  final double width;
  final double height;
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    // 利用canvas画出三个顶点的坐标 path是一个顶点在左侧的聊天三角形
    Path path = Path()
      ..moveTo(0, height / 2) //顶点坐标
      ..lineTo(width, height)
      ..lineTo(width, 0)
      ..lineTo(0, height / 2);

    // paint（画笔）
    Paint paint = Paint()
      ..style = PaintingStyle.fill //填充
      ..color = color; //颜色

    canvas.drawPath(path, paint);
  }

  // 不需要重新绘制
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}
